Chào các bạn hôn nay Dũ xin hướng dẫn các bạn tạo trang dịch vụ bằng Bootstrap và CSS3 Transition
Hiển thị các bài đăng có nhãn WEB CƠ BẢN. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn WEB CƠ BẢN. Hiển thị tất cả bài đăng
Chèn hình ảnh vào trang web bằng HTML5
CSS3 HTML5 WEB CƠ BẢNChào các bạn ở các bài trước Dũ đã hướng dẫn cho các bạn cách chèn audio và video và trang web bằng html5, hôm nay Dũ xin hướng dẫn các bạn cách chèn hình ảnh vào trang web bằng html5.
trong bài này ta sử dụng thẻ FIGURE để thêm hình ảnh vào web bằng html5.
- Thẻ figure cung cấp cho ta các nội dung tương đương một con số hay là biểu đồ, nó có thể dùng để nhóm một chú thích với một hoặc nhiều hình ảnh, một khối mã hoặc nội dung khác.
- Các thẻ <figure> là một trong các thẻ nội dung được nhúng trong HTML.
Cú Pháp:
alt="..."
Ứng dụng thẻ HTML5 FIGURE - CSS3 Transform:
Nhằm giúp cho hình ảnh chúng ta khi rê chuột vào nó sẻ tạo ra các hiệu ứng đẹp mắt.
ở đây Dũ sẻ hướng demo cho các bạn luôn nhé.
các bạn chỉ việc tạo một file .html trên máy của mình và chạy thử bằng trình duyệt nhé.
trong bài này ta sử dụng thẻ FIGURE để thêm hình ảnh vào web bằng html5.
- Thẻ figure cung cấp cho ta các nội dung tương đương một con số hay là biểu đồ, nó có thể dùng để nhóm một chú thích với một hoặc nhiều hình ảnh, một khối mã hoặc nội dung khác.
- Các thẻ <figure> là một trong các thẻ nội dung được nhúng trong HTML.
Cú Pháp:
<figure>-Trong thể img ta có thể thêm các thuộc tính như:
<img src="link hình" />
<figcaption>chú thích cho hình ảnh</figcaption>
</figure>
alt="..."
Ứng dụng thẻ HTML5 FIGURE - CSS3 Transform:
Nhằm giúp cho hình ảnh chúng ta khi rê chuột vào nó sẻ tạo ra các hiệu ứng đẹp mắt.
ở đây Dũ sẻ hướng demo cho các bạn luôn nhé.
các bạn chỉ việc tạo một file .html trên máy của mình và chạy thử bằng trình duyệt nhé.
<!DOCTYPE html>Lời kết : kết thúc bài này mình nghĩ các bạn cũng biết cách Chèn hình ảnh vào trang web bằng HTML5 rồi đúng không, các bạn nên tiềm thêm một số CSS3 Transform để sau này có thể áp dụng vào chức năng rê chuột vào sản phẩm hiện lên thông tin giá cả,... chúc các bạn thành công.
<title>Minh Dũ Blog - Ứng dụng thẻ HTML5 FIGURE - CSS3 Transform</title>
<style type='text/css'>
.list-cover figure {
display: inline-block;
margin: .2em;
transition: transform .3s ease-out;
max-height: 315px;
min-height: 315px;
}
.list-cover figure:hover, .list-cover figure:active {
transform: scale(1.2);
}
.list-cover figcaption {
background: rgba(46,204,113,.7);
margin-top: -30%;
position: relative;
padding: .5em;
padding-top: 1.1em;
transition: background-color .3s ease;
}
.list-cover figure:hover figcaption, .list-cover figure:active figcaption {
background-color: #ec008c;
}
.list-cover a {
color: #fff;
}
</style>
<section class="list-cover">
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
<figure>
<a href="" title="">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGf2P6-lclb81AGZ9y9KxHFe9rjtxYGZAK3FtWLiWWUVC8Ldlr96dvPQ8bjvASonTRHgHNaGJfBAXu7OAWtNygk63iia8rDBkGhZTuiU1_HR_0FDywscTQtIT7FXXl3C68m6_keRznhAE/s1600/chen+hinh+bang+html5.jpg" width="200px" alt="" />
<figcaption>Minh Dũ Blog</figcaption>
</a>
</figure>
</section>
</html>
Tạo lịch trên web dùng CSS3 - Flat Calendar CSS3
CSS3 WEB CƠ BẢNChào các bạn hơm nay Minh Dũ Blog xin hướng dẫn cho các bạn cách tạo lịch trên web dùng CSS3 chuẫn Responsive luôn nhé.
Để tạo được một Calendar ta cần có 1 file css vào thư mục css với tên là minkalender.css nội dung sau:
- trong head ta viết như sau nhé.
Để tạo được một Calendar ta cần có 1 file css vào thư mục css với tên là minkalender.css nội dung sau:
.kalender-wrapper{và một file js kalender.js với nội dung:
width:100%;
font-family: 'Lato', sans-serif;
}
.kalender-header{
position:relative;
background-color:#3498db;
color:#fff;
text-align:center;
}
.kalender-header .kalender-detail{
padding:10px;
}
.kalender-header .kalender-detail .kalender-day{
display:block;
font-size:28px;
}
.kalender-header .kalender-detail .kalender-year,.kalender-header .kalender-detail .kalender-month{
display:inline-block;
padding:5px 10px;
}
.kalender-header .kalender-arrow-left{
position:absolute;
left:20px;
display:block;
top:35%;
cursor:pointer;
padding:2px 12px;
background-color:#fff;
color:#3498db;
border-radius:50%;
opacity:0.8;
transition:.3s;
font-size:20px;
}
.kalender-header .kalender-arrow-right{
position:absolute;
right:20px;
display:block;
top:35%;
cursor:pointer;
padding:2px 12px;
background-color:#fff;
color:#3498db;
border-radius:50%;
opacity:0.8;
transition:.3s;
font-size:20px;
}
.kalender-header .kalender-arrow-right:hover,.kalender-header .kalender-arrow-left:hover{
opacity:1;
}
.kalender-body{
border-left:1px solid #d9d9d9;
border-right:1px solid #d9d9d9;
border-bottom:1px solid #d9d9d9;
}
.kalender-body .kalender-days{
margin:0;
padding:0;
list-style:none;
display:table;
table-layout:fixed;
width:100%;
}
.kalender-body .kalender-days.days{
color:#3498db;
font-weight:600;
}
.kalender-body .kalender-days > li{
display:table-cell;
padding:5px 8px;
text-align:center;
}
.kalender-body .kalender-days > li.no-days{
color:#ddd;
}
.kalender-body .kalender-days > li.today{
color:#3498db;
border:1px solid #3498db;
border-radius:50%;
}
.kalender-body .kalender-days > li.today2{
color:#fff;
background-color:#3498db;
}
.kalender-body .kalender-days > li.today3{
color:#3498db;
position:relative;
}
.kalender-body .kalender-days > li.today3:hover{
background-color:transparent;
}
.kalender-body .kalender-days > li.today3:after{
position:absolute;
top:0;
left:4px;
right:4px;
bottom:0;
border:1px solid #3498db;
border-radius:50%;
content:"";
transform:rotate(-15deg);
}
.kalender-body .kalender-days > li:hover{
background-color:#eee;
}
/* themes */
.kalender-wrapper.red .kalender-header,.kalender-wrapper.red .kalender-body .kalender-days > li.today2{
background-color:#e74c3c;
}
.kalender-wrapper.red .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.red .kalender-body .kalender-days > li.today{
border-color:#e74c3c;
}
.kalender-wrapper.red .kalender-body .kalender-days > li.today3,.kalender-wrapper.red .kalender-body .kalender-days.days,.kalender-wrapper.red .kalender-body .kalender-days > li.today,.kalender-wrapper.red .kalender-header .kalender-arrow-right,.kalender-wrapper.red .kalender-header .kalender-arrow-left{
color:#e74c3c;
}
.kalender-wrapper.green .kalender-header,.kalender-wrapper.green .kalender-body .kalender-days > li.today2{
background-color:#2ecc71;
}
.kalender-wrapper.green .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.green .kalender-body .kalender-days > li.today{
border-color:#2ecc71;
}
.kalender-wrapper.green .kalender-body .kalender-days > li.today3,.kalender-wrapper.green .kalender-body .kalender-days.days,.kalender-wrapper.green .kalender-body .kalender-days > li.today,.kalender-wrapper.green .kalender-header .kalender-arrow-right,.kalender-wrapper.green .kalender-header .kalender-arrow-left{
color:#2ecc71;
}
.kalender-wrapper.turquoise .kalender-header,.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today2{
background-color:#1abc9c;
}
.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today{
border-color:#1abc9c;
}
.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today3,.kalender-wrapper.turquoise .kalender-body .kalender-days.days,.kalender-wrapper.turquoise .kalender-body .kalender-days > li.today,.kalender-wrapper.turquoise .kalender-header .kalender-arrow-right,.kalender-wrapper.turquoise .kalender-header .kalender-arrow-left{
color:#1abc9c;
}
.kalender-wrapper.purple .kalender-header,.kalender-wrapper.purple .kalender-body .kalender-days > li.today2{
background-color:#9b59b6;
}
.kalender-wrapper.purple .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.purple .kalender-body .kalender-days > li.today{
border-color:#9b59b6;
}
.kalender-wrapper.purple .kalender-body .kalender-days > li.today3,.kalender-wrapper.purple .kalender-body .kalender-days.days,.kalender-wrapper.purple .kalender-body .kalender-days > li.today,.kalender-wrapper.purple .kalender-header .kalender-arrow-right,.kalender-wrapper.purple .kalender-header .kalender-arrow-left{
color:#9b59b6;
}
.kalender-wrapper.yellow .kalender-header,.kalender-wrapper.yellow .kalender-body .kalender-days > li.today2{
background-color:#f1c40f;
}
.kalender-wrapper.yellow .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.yellow .kalender-body .kalender-days > li.today{
border-color:#f1c40f;
}
.kalender-wrapper.yellow .kalender-body .kalender-days > li.today3,.kalender-wrapper.yellow .kalender-body .kalender-days.days,.kalender-wrapper.yellow .kalender-body .kalender-days > li.today,.kalender-wrapper.yellow .kalender-header .kalender-arrow-right,.kalender-wrapper.yellow .kalender-header .kalender-arrow-left{
color:#f1c40f;
}
.kalender-wrapper.dark .kalender-header,.kalender-wrapper.dark .kalender-body .kalender-days > li.today2{
background-color:#34495e;
}
.kalender-wrapper.dark .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark .kalender-body .kalender-days > li.today{
border-color:#34495e;
}
.kalender-wrapper.dark .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark .kalender-body .kalender-days.days,.kalender-wrapper.dark .kalender-body .kalender-days > li.today,.kalender-wrapper.dark .kalender-header .kalender-arrow-right,.kalender-wrapper.dark .kalender-header .kalender-arrow-left{
color:#34495e;
}
.kalender-wrapper.dark-blue .kalender-header,.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today2{
background-color:#2980b9;
}
.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today{
border-color:#2980b9;
}
.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-blue .kalender-body .kalender-days.days,.kalender-wrapper.dark-blue .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-blue .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-blue .kalender-header .kalender-arrow-left{
color:#2980b9;
}
.kalender-wrapper.dark-red .kalender-header,.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today2{
background-color:#c0392b;
}
.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today{
border-color:#c0392b;
}
.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-red .kalender-body .kalender-days.days,.kalender-wrapper.dark-red .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-red .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-red .kalender-header .kalender-arrow-left{
color:#c0392b;
}
.kalender-wrapper.dark-green .kalender-header,.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today2{
background-color:#27ae60;
}
.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today{
border-color:#27ae60;
}
.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-green .kalender-body .kalender-days.days,.kalender-wrapper.dark-green .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-green .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-green .kalender-header .kalender-arrow-left{
color:#27ae60;
}
.kalender-wrapper.dark-turquoise .kalender-header,.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today2{
background-color:#16a085;
}
.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today{
border-color:#16a085;
}
.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-turquoise .kalender-body .kalender-days.days,.kalender-wrapper.dark-turquoise .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-turquoise .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-turquoise .kalender-header .kalender-arrow-left{
color:#16a085;
}
.kalender-wrapper.dark-purple .kalender-header,.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today2{
background-color:#8e44ad;
}
.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today{
border-color:#8e44ad;
}
.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-purple .kalender-body .kalender-days.days,.kalender-wrapper.dark-purple .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-purple .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-purple .kalender-header .kalender-arrow-left{
color:#8e44ad;
}
.kalender-wrapper.dark-yellow .kalender-header,.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today2{
background-color:#f39c12;
}
.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today{
border-color:#f39c12;
}
.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today3,.kalender-wrapper.dark-yellow .kalender-body .kalender-days.days,.kalender-wrapper.dark-yellow .kalender-body .kalender-days > li.today,.kalender-wrapper.dark-yellow .kalender-header .kalender-arrow-right,.kalender-wrapper.dark-yellow .kalender-header .kalender-arrow-left{
color:#f39c12;
}
.kalender-wrapper.darker .kalender-header,.kalender-wrapper.darker .kalender-body .kalender-days > li.today2{
background-color:#2c3e50;
}
.kalender-wrapper.darker .kalender-body .kalender-days > li.today3:after,.kalender-wrapper.darker .kalender-body .kalender-days > li.today{
border-color:#2c3e50;
}
.kalender-wrapper.darker .kalender-body .kalender-days > li.today3,.kalender-wrapper.darker .kalender-body .kalender-days.days,.kalender-wrapper.darker .kalender-body .kalender-days > li.today,.kalender-wrapper.darker .kalender-header .kalender-arrow-right,.kalender-wrapper.darker .kalender-header .kalender-arrow-left{
color:#2c3e50;
}
/*! * minkalender * Copyright 2015 Minangsoft. */ "use strict";(function($){$.fn.minkalender=function(options){var settings=$.extend({days:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],months:["January","February","March","April","May","June","July","August","September","October","November","December"],color:"",today:"today"},options);var date=new Date();var currentmonth=date.getMonth();var currentday=date.getDate();var currentyear=date.getFullYear();return this.each(function(){var me=this;$(me).addClass('kalender-wrapper');$(me).addClass(settings.color);var calendar=updateDate(currentday,currentmonth,currentyear);$(me).append(calendar);$(me).on('click','.control',function(e){var month=0;var year=0;var day=0;if($(this).hasClass('kalender-arrow-left')==true){month=settings.months.indexOf($(me).find('.kalender-month').html())-1;year=$(me).find('.kalender-year').html();day=1;if(month<0){month=11;year=parseInt(year)-1;}} if($(this).hasClass('kalender-arrow-right')==true){month=settings.months.indexOf($(me).find('.kalender-month').html())+1;year=$(me).find('.kalender-year').html();day=1;if(month>11){month=0;year=parseInt(year)+1;}} if((currentmonth==month)&&(currentyear==year))day=currentday;var calendar=updateDate(day,month,year);$(me).empty();$(me).append(calendar);});function updateDate(d,m,y){var dim=[31,0,31,30,31,30,31,31,30,31,30,31];var oD=new Date(y,m,1);var startday=oD.getDay()+1;var startmonth=oD.getMonth();var startyear=oD.getFullYear();dim[1]=(((oD.getFullYear()%100!=0)&&(oD.getFullYear()%4==0))||(oD.getFullYear()%400==0))?29:28;var container='<div class="kalender-header"><div class="kalender-detail"><div class="kalender-day">'+d+'</div><div class="kalender-month">'+settings.months[m]+'</div><div class="kalender-year">'+y+'</div></div><span class="kalender-arrow-left control">‹</span><span class="kalender-arrow-right control">›</span></div>';container+='<div class="kalender-body"><ul class="kalender-days days">';for(var s=0;s<7;s++){container+='<li>'+settings.days[s].substr(0,3)+'</li>';} container+='</ul><ul class="kalender-days">';for(var i=1;i<=42;i++){var x=((i-startday>=0)&&(i-startday<dim[m]))?i-startday+1:'';if((startyear==currentyear)&&(startmonth==currentmonth)&&(x==d)){container+='<li class="'+settings.today+'">'+x+'</li>';}else if(x==d){container+='<li class="'+settings.today+'">'+x+'</li>';}else{if(x==""){container+='<li></li>';}else{container+='<li>'+x+'</li>';}} if(((i)%7==0)&&(i<36))container+='</ul><ul class="kalender-days">';} return container+='</div>';}});};})(jQuery);Tiếp theo ta tạo một trang index.html để test thử nhé. trong file index.html ta viết như sau
<!DOCTYPE html>
<head></head>
<body></body>với <!DOCTYPE html> các bạn xóa những phần thừ nếu tạo bằng Drw nhé, chuyễn thành như vầy vì đây là chuẫn để chạy Responsive.
</html>
- trong head ta viết như sau nhé.
<head>- Trong body ta tiếp tục viết như sau:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Minh Dũ Blog - Flat Responsive Calendar Css3</title>
<meta name="description" content="Minsoft - Tabs Css3 Html5" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/minkalender.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="kalender.js"></script>
<script>
$(document).ready(function(){
$('#date1').minkalender();
$('#date2').minkalender({color:"darker",today:"today2"});
$('#date3').minkalender({color:"red",today:"today3"});
$('#date4').minkalender({months:["januari","februari","maret","april","mei","juni","juli","agustus","september","oktober","november","desember"]});
});
</script>
</head>
<body>- Trong phần nầy có 4 mẫu cho ta lựa chọn, đây là 1 trong 4 mẫu nhé. bắt đầu từ <div class="row" style="margin-bottom:20px;"> và kết thức là </div>
<div class="container" style="margin-top:100px;">
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date1"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date2"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date3"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date4"></div>
</div>
</div>
</div>
</body>
<div class="row" style="margin-bottom:20px;">- Toàn bộ code ta có được là:
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date1"></div>
</div>
</div>
<!DOCTYPE html>Lời kết : Kết thúc bài hôm nay Minh Dũ nghĩ các bạn cũng đã nắm được Cách Tạo lịch trên web dùng CSS3 - Flat Calendar CSS3. Chúc các bạn thành công
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Minh Dũ Blog - Flat Responsive Calendar Css3</title>
<meta name="description" content="Minsoft - Tabs Css3 Html5" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/minkalender.css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="kalender.js"></script>
<script>
$(document).ready(function(){
$('#date1').minkalender();
$('#date2').minkalender({color:"darker",today:"today2"});
$('#date3').minkalender({color:"red",today:"today3"});
$('#date4').minkalender({months:["januari","februari","maret","april","mei","juni","juli","agustus","september","oktober","november","desember"]});
});
</script>
</head>
<body>
<div class="container" style="margin-top:100px;">
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date1"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date2"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date3"></div>
</div>
</div>
<div class="row" style="margin-bottom:20px;">
<div class="col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<div id="date4"></div>
</div>
</div>
</div>
</body>
</html>
Cách chèn âm thanh Audio vào trang web bằng HTML5
HTML5 WEB CƠ BẢNBài trước Dũ cũng hướng dẫn các bạn Cách chèn Video vào trang web bằng HTML5 ở bài này Dũ xin hướng dẫn các bạn cách chèn âm thanh thẻ Audio vào trang web bằng HTML5.
Đầu tiên chúng ta cần tiềm hiểu về trình duyệt hỗ trợ chạy thẻ Audio trong HTML5.
- Internet Explorer 9, Opera, Chrome, Frirefox và Safari Hỗ trợ chơi được thể <audio>
- đối với trình duyệt Internet Explorer 8 cùng các phiên bản trước đó đều không hỗ trợ thẻ <audio>
Lưu ý: tuy một số trình duyệt này hỗ trợ chạy được thẻ Audio nhưng có một số loại định dạng nó sẻ không chạy được như
- Internet Explorer không chơi được định dạng Wav và Ogg.
- Opera không chơi được file .mp3
- Safari không chơi được định dạng .Ogg
Các kiểu MINE-TYPE cho các định dạng Audio
- Mp3 -> audio/mpeg
- Wav -> audio/wav
- Ogg -> audio/ogg
Cú pháp của thẻ audio là:
src: đường dẫn đến tập tin âm thanh (mp3, wav,ogg)
autoplay: cho phép tự động chơi khi âm thanh đã sãng sàng.
controls: cho phép hiện ra thanh điều khiển của audio đó.
loop: lập lại âm thanh khi nó phát hết.
cú pháp thứ 2 của thẻ audio
Đầu tiên chúng ta cần tiềm hiểu về trình duyệt hỗ trợ chạy thẻ Audio trong HTML5.
- Internet Explorer 9, Opera, Chrome, Frirefox và Safari Hỗ trợ chơi được thể <audio>
- đối với trình duyệt Internet Explorer 8 cùng các phiên bản trước đó đều không hỗ trợ thẻ <audio>
Lưu ý: tuy một số trình duyệt này hỗ trợ chạy được thẻ Audio nhưng có một số loại định dạng nó sẻ không chạy được như
- Internet Explorer không chơi được định dạng Wav và Ogg.
- Opera không chơi được file .mp3
- Safari không chơi được định dạng .Ogg
Các kiểu MINE-TYPE cho các định dạng Audio
- Mp3 -> audio/mpeg
- Wav -> audio/wav
- Ogg -> audio/ogg
Cú pháp của thẻ audio là:
<audio src="file.mp3" autoplay controls></audio>
src: đường dẫn đến tập tin âm thanh (mp3, wav,ogg)
autoplay: cho phép tự động chơi khi âm thanh đã sãng sàng.
controls: cho phép hiện ra thanh điều khiển của audio đó.
loop: lập lại âm thanh khi nó phát hết.
cú pháp thứ 2 của thẻ audio
<audio controls>Lời kết : Kết thúc bài hôm nay Minh Dũ nghĩ các bạn cũng đã nắm được Cách chèn âm thanh Audio vào trang web bằng HTML5. Chúc các bạn thành công!
<source src="file.mp3" type="audio/mpeg">
<source src="file.wav" type="audio/wav">
</audio>
Cách chèn Video vào trang web bằng HTML5
HTML5 WEB CƠ BẢNMinh Dũ xin giới thiệu với các bạn một số thành phần mới trong HTML5 với thẻ Video.
Cú pháp cơ bản:
controls: cho phép hiện thanh điều khiển của video
src: đường dẫn đến tập tin của video cần phát.
loop: tiếp tục phát lại video đó khi video kết thúc.
width: xác định độ rộng của video.
height: xác định chiều cao của video.
audio: xác định trạng thái âm thanh ở đây nếu giá trị của nó là muted tức là tắt âm thanh của video.
poster: ảnh poster (ảnh đại diện) ban đầu của video.
preload: cho phép tại đoạn video ngay cả khi tải trang web giúp rút nhắn thời gian tải video.
Cú pháp chạy nhiều loại định dạng file video trong HTML5
Lời kết : Kết thúc bài hôm nay Dũ nghĩ các bạn cũng đã nắm rỏ được Cách chèn Video vào trang web bằng HTML5. Chúc các bạn thành công!
Cú pháp cơ bản:
<video src="file-video.mp4" autoplay controls></video>autoplay: cho phép tự động chơi video khi ta vào web lúc video đó sẵn sàng
controls: cho phép hiện thanh điều khiển của video
src: đường dẫn đến tập tin của video cần phát.
loop: tiếp tục phát lại video đó khi video kết thúc.
width: xác định độ rộng của video.
height: xác định chiều cao của video.
audio: xác định trạng thái âm thanh ở đây nếu giá trị của nó là muted tức là tắt âm thanh của video.
poster: ảnh poster (ảnh đại diện) ban đầu của video.
preload: cho phép tại đoạn video ngay cả khi tải trang web giúp rút nhắn thời gian tải video.
Cú pháp chạy nhiều loại định dạng file video trong HTML5
<video controls>với cú pháp này thì nó sẻ hay hơn cú pháp trước. vì nó có thể chạy được nhiều định dạng file.
<source src="file-video.pm4" type="video/mp4">
<source src="file-video.ogg" type="video/ogg">
<source src="file-video.avi" type="video/avi">
</video>
Lời kết : Kết thúc bài hôm nay Dũ nghĩ các bạn cũng đã nắm rỏ được Cách chèn Video vào trang web bằng HTML5. Chúc các bạn thành công!
Hướng dẫn tạo biểu mẫu cho trang web (bài 4)
Dreamweaver HTML TUẦN 1 WEB CƠ BẢN
Chào các bạn, hơm nay Minh Dũ xin hướng dẫn cho các bạn cách tạo ra một biểu mẫu cho trang web. Thường thì biểu mẫu chúng ta tao ra để làm trang đăng ký thành viên, trang liên hệ, đăng nhập,...
chúng ta bắt đầu chèn form vào ở chế độ design để cộng việc thiết kế web của mình sẻ nhanh hơn thay vì mình sẻ viết từng đoạn code nhé.
Đầu tiên chúng ta cần phải khai báo thẻ Form vào trong trang dangky.html của mình.
<body>
<form>
<!-- viết code ở dây -->
</form>Tiếp theo là Form nhập username
</body>
<body>Với type="text" là nhập các kí tự từ bàn phím, size="25" là độ dài khung bằng 25.
<form>
<input type="text" size="25" />
</form>
</body>
Form nhập password
<body>Với type="password" là các kí tự sẽ được thay thế bằng ***, size="25" là độ dài khung bằng 25.
<form>
<input type="password" size="25" />
</form>
</body>
Form textarea
<body>Với rows="..." là chiều cao, cols="..." là chiều ngang.
<form>
<textarea rows="8" cols="50"></textarea>
</form>
</body>
Dạng form textarea này chúng ta có thể nhập đoạn văn dài vào đây.
Thường được dùng để tạo khung comment hoặc là khung đóng góp ý kiến.
Form select, option
<body>Dạng này thường được dùng chọn ngày tháng năm sinh...v.v
<form>
<select class="standardSelect">
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
</select>
</form>
</body>
Form radio
<body>Dạng này thường được dùng để tạo form lựa chọn giới tính.
<form>
<input type="radio" Name="gender" Value="Nam" />Nam
<input type="radio" Name="gender" Value="Nữ" />Nữ
</form>
</body>
Form checkbox
<body>Dạng này chúng ta có thể check nhiều lựa chọn cùng lúc. Khác với form radio chỉ chọn được 1.
<form>
<input type="checkbox"/> Tôi đồng ý qui định của website.
</form>
</body>
Form submit
<body>Với value="login" tức là button submit sẽ có tên hiển thị là "login".
<form>
<input type="submit" value="Đăng ký" />
</form>
</body>
Lời kết : Kết thúc bài hôm nay Minh Dũ nghĩ rằng bạn đã có thể nắm rõ cách tạo form đăng ký bằng ngôn ngữ HTML là như thế nào, việc nắm được những cú pháp cũng như các tag HTML tạo form như trên giúp bạn khi gặp những form phức tạp cũng cảm thấy nhẹ nhàng hơn.
Chúc bạn thành công!
Giới thiệu các thẻ HTML cơ bản (Bài 3) Phần 2
HTML TUẦN 1 WEB CƠ BẢN
Cú pháp của một: Link
+ Trong thẻ a có các thuộc tính thường dùng như:
- href="URL": dùng để chỉ đường dẫn tới trang web hay địa chỉ website muốn liên kết đến.
- title="Chú thích" : thuộc tính title dùng để tạo chú thích cho siêu liên kết này nói về cái chủ đề gì.
- target="_blank | self" : thuộc tính target dùng chỉ định nội dung của trang web liên kết tới hiện ra ở đâu.
Nó có các giá trị như:
_blank: dùng để mở ra cửa sổ mới.
_self: dùng hiện cùng cửa sổ trình duyệt.
_top: hiện cùng cửa sổ frame (thường dùng trong trang web dạng Frame)
_parent: hiện ở cửa sổ frame cha (thường dùng trong trang web dạng Frame)
Ví dụ:
Cú Pháp của Email link:
<p align="center">© Copyright 2015 by minhdublog.com<br>Địa chỉ: Mỹ Tho, Tiền Giang<br>Điện thoại: 0122.4080.212<br>Email:<a href="mailto:minhdudesign@gmail.com">minhdudesign@gmail.com</a><br>Website: www.minhdublog.com</p>
Ví dụ:
<img src="images/hinh.jpg" usemap="#Map">
<map name="Map">
<area shape="rect" coords="97,119,220,175" href="linkA.html" alt="Chú thích cho link A">
<area shape="circle" coords="221,313,29" href="linkbB.html" alt="Chú thích cho link B">
<area shape="poly" coords="82,259,140,255,133,289,105,296,175,296,62,173" href="linkC.html" alt="Chú thích cho link C">
</map>
+ Để tạo Hotpot link cho hình ảnh trong thẻ phải có thuộc tính usemap và thuộc tính này có giá trị là tên của bảng đồ hình ảnh.
+ Thẻ
dùng để định nghĩa bảng đồ cho hình ảnh.
+ Thẻ dùng để tạo vùng chứa của hotpot.
+ Thuộc tính shape dùng tạo hình dáng của điểm Hotpot.
+ Thuộc tính coords dùng để chỉ toạ độ của hotpot.
+ Thuộc tính href dùng để chỉ đường dẫn tới trang web khi click vào Hotpot.
+ Thuộc tính alt dùng để tạo chú thích khi chuột đụng vào Hotpot.
+ Thuộc tính usemap chỉ định hình ảnh này có sử dụng bảng đồ hình ảnh.
Cách để tạo ra bookmark:
Các thành phần để tạo một bảng:
<table thuộc tính="giá trị" thuộc tính="giá trị"...></table>: Mở và đóng một bảng.
<tr thuộc tính="giá trị" thuộc tính="giá trị" ...></tr>: Mở và đóng một hàng.
<td thuộc tính="giá trị" thuộc tính="giá trị" ...></td>: Mở và đóng một ô.
Các thuộc tính của bảng (<table>)
+ Dùng thẻ a với thuộc tính name để tạo điểm đánh dấu tại vị trí muốn nhảy tới trong cùng 1 trang.
Ví dụ: <a name="vedautrangchu"></a>
+ Tạo liên kết để nhảy tới bookmark này bằng thẻ a
Ví dụ: <a href="#vedautrangchu">Về đầu trang</a>
Các thành phần để tạo một bảng:
<table thuộc tính="giá trị" thuộc tính="giá trị"...></table>: Mở và đóng một bảng.
<tr thuộc tính="giá trị" thuộc tính="giá trị" ...></tr>: Mở và đóng một hàng.
<td thuộc tính="giá trị" thuộc tính="giá trị" ...></td>: Mở và đóng một ô.
Các thuộc tính của bảng (<table>)
align=
background=
height=
width=
bgcolor=
bordercolordark=
bordercolor =
border=
bordercolorlight=
cellpadding=
cellspacing=
rules=
frame=
Các thuộc tính của hàng (<tr>)
align=
valign
bgcolor=
background=
Các thuộc tính của ô (<td>)
align=
valign=
bgcolor=
background=
char=
colspan=
rowspan=
nowrap=
height =
width=
Ví dụ về 1 bảng table đơn giản nhất nhé:
<html> <head> <title>ví dụ về bản đơn giản đầu tiên của bạn</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <table> <tr> <td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột nhé!</td> </tr> </table> </body> </html>
Đăng ký:
Bài đăng (Atom)


